<template>
  <md-toolbar class="md-white">
    <div class="md-layout md-gutter md-alignment-center-left toptool-info">
        <div class="md-layout-item md-size-10">
          <md-button class="md-icon-button" @click="close">
            <md-icon>close</md-icon>
          </md-button>
        </div>
        <div class="md-layout-item md-size-60">选择了 {{ checkedData.length }} 张图片</div>
        <div class="buttons md-layout-item md-section-end">
          <md-button class="md-icon-button md-plain" @click="openCollect">
            <md-icon>add</md-icon>
          </md-button>
          <md-button class="md-icon-button md-plain">
            <md-icon>get_app</md-icon>
          </md-button>
          <md-menu md-size="auto" md-direction="bottom-start" md-align-trigger>
            <md-button class="md-icon-button md-plain" md-menu-trigger>
              <md-icon>share</md-icon>
            </md-button>
            <md-menu-content>
              <!--md-menu-item @click="close">
                <md-icon class="fa fa-weixin"></md-icon>
              </md-menu-item-->
              <md-menu-item @click="close">
                <md-icon class="fa fa-qq"></md-icon>
              </md-menu-item>
              <md-menu-item @click="close">
                <md-icon class="fa fa-weibo"></md-icon>
              </md-menu-item>
            </md-menu-content>
          </md-menu>
        </div>
    </div>
    <md-dialog-prompt
      :md-active="collect.active"
      v-model="collect.title"
      md-title="输入收藏夹标题"
      md-input-maxlength="30"
      md-input-placeholder="输入一个标题..."
      md-cancel-text="取消"
      md-confirm-text="确认"
      @md-confirm="createCollect"
      @md-cancel="closeCollect"
      :md-close-on-esc="escColse"
      md-backdrop
      md-fullscreen
       />
  </md-toolbar>

</template>

<script>
export default {
  name: 'TopTools',
  props: {
    checkedData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      collect: {
        title: '',
        active: false
      },
      escColse: false
    }
  },
  methods: {
    changeNavIndex(index) {
      this.activeNavIndex = index
    },
    showNav() {
      this.showNavigation ? this.showNavigation = false : this.showNavigation = true
    },
    close() {
      this.$emit('close')
    },
    openCollect() {
      console.log('显示')
      this.collect.active = true
    },
    closeCollect() {
      this.collect.active = false
    },
    createCollect() {
      this.$http.post('/collects', {
        title: this.collect.title,
        pictuers_id: this.checkedData
      }).then( (res) => {
        this.$emit('msg', {info: '操作成功', link: '/collect/' + res.data.id, 'link_text': '查看新收藏夹'})
        this.collect.active = false
      }).catch( (error) => {
        this.$emit('msg', this.$error(error))
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~vue-material/dist/theme/engine";
  .md-white {
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 3;
  }
  .pl-2 {
    padding-left: 4rem !important;
    font-size: 1.125rem;
  }
  .toptool-info {

  }
  .md-section-end {
    justify-content: flex-end;
    flex: 1;
    display: flex;
    align-items: center;
    order: 10;
    button {
      .md-icon {
        color: #1a73e8;
      }

    }
  }
  .ft-l {
    text-align: left;
  }
</style>
